import React, {
    Component
} from 'react';
import ReactDOM from 'react-dom';
import {
    observer
} from 'mobx-react';
import {
    withRouter
} from 'react-router-dom';
import {
    Tools,
    Icon,
    Timeline
} from 'weaver-mobile';
import Item from './timeline/Item';
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class Content extends Component {
    constructor(props) {
        super(props);
        this.state = {
            height: window.document.documentElement.clientHeight - 2 //47,
        }
    }

    convertStatus = v => {
        switch (v) {
            case '0':
                return {
                    label: getLabel('225', '正常'),
                    className: 'normal'
                };
            case '1':
                return {
                    label: getLabel('20081', '迟到'),
                    className: 'abnormal'
                };
            case '2':
                return {
                    label: getLabel('20082', '早退'),
                    className: 'abnormal'
                };
            case '3':
                return {
                    label: getLabel('20085', '旷工'),
                    className: 'abnormal'
                };
            case '4':
                return {
                    label: getLabel('20086', '漏签'),
                    className: 'abnormal'
                };
            case '5':
                return {
                    label: getLabel('26198', '外勤'),
                    className: 'abnormal'
                };
            case 'auto_card':
                return {
                    label: getLabel('522591','自动打卡'),
                    className: 'autoSign'
                };
            default:
                return {
                    label: '',
                    className: ''
                };
        }
    }

    render() {
        const {
            store,
            redirectToOutsideSign,
            tabBarHeight,
        } = this.props;
        const {
            showSchedual,
            headerRef,
            baseInfo,
            timeLineInfo,
            showWorkflow
        } = store;
        const {
            timeline
        } = timeLineInfo;
        let index = -1;

        let height = 0;
        if (headerRef != null) {
            height = headerRef.clientHeight;
        }
        if (tabBarHeight) {
            height += tabBarHeight;
        }

        if (timeline == null || timeline.length == 0) {
            return (
                <div className='content' style={{height: this.state.height - height}}>
                    <div className='noData'>
                        <div>
                            <Icon type="no-data" size="lg" color='#b2b2b2' className='icon-1'/>
                            <div className='msg'>{baseInfo.groupname}</div>
                        </div>
                    </div>
                    
                </div>
            )
        }
        return (
            <div className='content' style={{height: this.state.height - height}}>
                <div className='bg' />
                <div className='timeLine'>
                <Timeline>
                {
                    timeline && timeline.map((item, i) => {
                        if(item.active === '1')
                            index = i;

                        const itemProps = {
                            redirectToOutsideSign,
                            key: i,
                            ref: `item${i}`,
                            data: item,
                            store: store,
                            activeIndex: index,
                            currIndex: i,
                            sign: this.sign,
                            isLast: i === (timeline.length - 1),
                            convertStatus: this.convertStatus
                        }
                        return (
                            <Item {...itemProps} />
                        )
                    })
                }
                </Timeline>
                </div>
                <div className='flow' >{getLabel('512629', '如有打卡异常，请')+' '}<a className='flow-link' onClick={showWorkflow}>{getLabel('132023', '提交考勤流程')+' >>'}</a></div>
            </div>
        )
    }
}